<template>
	<view class="content" :style="theme">
		<view v-if="list.length > 0">
			<view class="addressArr mb2" v-for="(item, index) in list" :key="index">
				<view class="left" @click="callbackBtn(item)">
					<view class="title" >
						<text class="name">{{item.receiverName}}</text>
						<text class="tel">{{item.receiverPhone}}</text>
						<text v-if="item.isDefault==1" class="on">默认</text>
					</view>
					<view class="address">{{item.address}}</view>
				</view>
				<image class="right" :src="imgHost+'/address_ic_edit.png'" @click="jump('/pages/home/addAddr?id=',item.id)"></image>
			</view>
		</view>
		<view class="foot_btn" @click="jump('/pages/home/addAddr')">
			添加收货地址
		</view>
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				list: [],
				page: 1,
				firstQueryTime: '',
				end: false,
				isSelect: ''
			}
		},
		onLoad(option) {
			if(option.isSelect) {
				this.isSelect = option.isSelect
			}
		},
		onShow() {
			this.page = 1
			this.list = []
			this.end = false
			this.firstQueryTime = this.$app.firstQueryTime();
			this.getList()
		},
		methods: {
			jump(url, params, a) {
				console.log(14, url, params)
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			getList() {
				this.$app.ajax({
					data: {
						pagination: {
							page: this.page,
							rows: 10,
							firstQueryTime: this.firstQueryTime
						},
					},
					api: this.$api.addressList(),
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
						    this.end = true
						}
						this.list = this.list.concat(res.recordList)
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				} else {
					this.$app.showToast('没有更多数据了')
				}
			},
			callbackBtn(cnt) {
				if(this.isSelect){
					uni.$emit("callback", cnt);
					uni.navigateBack({
						delta: 1
					})
				}
			}
		},
		onReachBottom(e) {
			this.reachBottom()
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		padding: 30rpx 30rpx 130rpx;
	}

	.addressArr {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 32rpx;
		box-sizing: border-box;
		padding: 24rpx 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
		&:last-of-type {
			border-bottom: none;
		}

		.left {
			flex: 1;
		}

		.right {
			width: 40rpx;
			height: 40rpx;
			margin-left: 50rpx;
		}

		.title {
			font-size: 26rpx;
			font-weight: 400;
			color: #666666;

			text {
				display: inline-block;
				margin-right: 12rpx;
			}

			.name {
				color: #222222;
				font-size: 30rpx;
				font-weight: bolder;
			}

			.on {
				background-color: $color;
				width: 76rpx;
				line-height: 42rpx;
				height: 42rpx;
				text-align: center;
				color: #FFFFFF;
				border-radius: 8rpx;
				margin-right: 0;
				font-size: 20rpx;
			}
		}

		.address {
			font-size: 26rpx;
			font-weight: 400;
			color: #444444;
			margin-top: 15rpx;
		}

	}
	.foot_btn {
		position: fixed;
		left: 40rpx;
		bottom: 30rpx;
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: $color;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		z-index: 999;
		border-radius: 44rpx;
	}
</style>
